<html>
<head><title>BlindText Extension Options</title></head>
<script type="text/javascript">
function restoreOptions() {
	document.getElementById("customTxt").value = localStorage["txtToBeUsed"];
}

function saveDefaults() {
	localStorage["txtToBeUsed"] = document.getElementById("customTxt").value;
}

function restoreText()
{
	localStorage["txtToBeUsed"] = localStorage["txtDefault"];
	restoreOptions();
}



</script>
<style type="text/css">

body {
  font-size: 80%;
  font-family: Arial, sans-serif;
  padding: 0.75em;
  margin: 0;
  background-color: #cacaca;
}

textarea {
        width:500px;
        height:200px;
}

div#container{
    background: #fff;
    width: 90%;
    margin: 0 auto;
    padding: 12px;
    border: 1px solid #ccc;
    min-width: 520px;
    -webkit-border-radius: 12px;
}


div#header {
  padding: 0.75em 1em;
  padding-top: 0.6em;
  padding-left: 0;
  margin-bottom: 0.75em;
  position: relative;
  overflow: hidden;
  background: #FFD83D;
  -webkit-background-size: 100%;
  border: 1px solid #FFCC00;
  -webkit-border-radius: 6px;
  color: white;
  text-shadow: 0 0 2px black;
}

div#header h1 {
  padding-left: 10px;
  margin: 0;
  color: white;
}

div#settings {
    padding-left:10px;
}

</style>
<body onload="restoreOptions()">
    <div id="container">
        <div id="header">
            <h1>Blind Text options</h1>
        </div>
        <div id="settings">
            What text would you like to use:
            <br/>
            <textarea id="customTxt" name="customTxt"></textarea>
            <br/>
            <input type="button" onclick="saveDefaults()" value="save settings" />
            <input type="button" onclick="restoreText()" value="restore default blind text" />
        </div>
    </div>
    </body>
</html>